<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            height: 100%;
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
            background: #001f3f;
        }

        .content {
            position: relative;
            z-index: 1;
            color: white;
            text-align: center;
            padding-top: 20vh;
        }

        .firefly {
            position: absolute;
            width: 5px;
            height: 5px;
            background: #ffff00;
            border-radius: 50%;
            filter: blur(1px);
            animation: float 15s infinite ease-in-out, blink 2s infinite;
        }

        @keyframes float {

            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(100px, 100px);
            }

            50% {
                transform: translate(200px, 0);
            }

            75% {
                transform: translate(100px, -100px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 0.1;
            }

            50% {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>Fireflies</h1>
        <p>Experience a magical night with fireflies!</p>
    </div>
</body>

</html>
 <script>
    function createFirefly() {
        const firefly = document.createElement('div');
        firefly.className = 'firefly';
        firefly.style.left = `${Math.random() * 100}%`;
        firefly.style.top = `${Math.random() * 100}%`;
        firefly.style.animationDelay = `${Math.random() * 15}s, ${Math.random() * 2}s`;
        document.body.appendChild(firefly);
    }

    for (let i = 0; i < 100; i++) {
        createFirefly();
    }
</script>